import React, { useCallback, useState, memo } from 'react'; 

// 使用memo防止重新渲染
const HYButton = memo((props) => {
    console.log('HYButton重新渲染' + props.title);
    return <button onClick={props.increment}>HYButton+1</button>
});

/**    
 * 
 * @Leon callBack可以进行的性能优化
 * 场景:将一个组件中的函数,传递给子元素进行回调使用时,使用useCallback对函数进行处理
 * 这里使用了memo之后,使用useCallback的函数,每次show切换的时候,就不会每次都渲染
 */
export default function CallbackHookDemo02() {
    console.log('CallbackHookDemo02重新渲染');

    const [count, setCount] = useState(0);
    const [show, setShow] = useState(true);

    const increment1 = () => {
        console.log('执行increment1函数');
        setCount(count + 1);
    }

    // 这里如果不依赖count 返回的一直就是 0+1 的结果 依赖的一直是原来的不变的count
    const increment2 = useCallback(() => {
            console.log('执行increment2函数');
            setCount(count + 1);
    }, [count]);

    return (
        <div>
            <h2>CallbackHookDemo01: {count}</h2>
            {/* <button onClick={increment1}>+1</button>
            <button onClick={increment2}>+1</button> */}

            {/* increment1,2 都传给了HYButton */}
            <HYButton title="btn1" increment={increment1}/>
            <HYButton title="btn2" increment={increment2}/>

            <button onClick={e => setShow(!show)}>show切换</button>
        </div>
    )
}